<template>
    <div class="table-box card">
        <div class="header-container">
            <h1 class="main-title">报表导出中心</h1>
            <p class="sub-title">选择您需要的报表类型,设定筛选条件后即可导出</p>
        </div>

        <!-- 新增报表盒子区域 -->
        <div class="report-list">
            <!-- 月度寄样汇总表 -->
            <div class="report-item">
                <h3 class="report-title">月度寄样汇总表</h3>
                <p class="report-desc">包含指定月份内所有产品的寄样汇总</p>
                <div class="divider"></div>
                <div class="picker-btn-group">
                    <el-date-picker v-model="month1" type="month" placeholder="选择月份" format="YYYY-MM" value-format="YYYY-MM"
                        style="width: 200px;" />
                    <el-button type="primary" @click="handleExport('monthly_sample', month1)">选择并导出</el-button>
                </div>
            </div>

            <!-- 季度销售统计表 -->
            <div class="report-item">
                <h3 class="report-title">寄样客户下单汇总表</h3>
                <p class="report-desc">导出指定月份寄样客户的下单汇总</p>
                <div class="divider"></div>
                <div class="picker-btn-group">
                    <el-date-picker v-model="month2" type="month" placeholder="选择月份" format="YYYY-MM" value-format="YYYY-MM"
                        style="width: 200px;" />
                    <el-button type="primary" @click="handleExport('quarter_sales', month2)">选择并导出</el-button>
                </div>
            </div>

            <!-- 年度库存分析表 -->
            <div class="report-item">
                <h3 class="report-title">经销商寄样申请月度汇总表</h3>
                <p class="report-desc">导出指定月份所有经销商寄样的申请汇总</p>
                <div class="divider"></div>
                <div class="picker-btn-group">
                    <el-date-picker v-model="month3" type="month" placeholder="选择月份" format="YYYY-MM" value-format="YYYY-MM"
                        style="width: 200px;" />
                    <el-button type="primary" @click="handleExport('annual_stock', month3)">选择并导出</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus';
const proxy = getCurrentInstance()?.proxy;
// 新增：报表相关状态
const month1 = ref('');  // 月度寄样汇总表选择的月份
const month2 = ref('');  // 季度销售统计表选择的月份（代表季度首月）
const month3 = ref('');  // 年度库存分析表选择的年份

// 新增：导出处理函数
const handleExport = (reportType: string, selectedMonth: string) => {
    if (!selectedMonth) {
        ElMessage.warning('请先选择时间范围');
        return;
    }
    let type = {
        'monthly_sample': 'report/monthSendSummary',
        'quarter_sales': 'report/monthCarrierSummary',
        'annual_stock': 'report/monthCarrierSendSummary'
    }
    let typeName = {
        'monthly_sample': '月度寄样汇总表',
        'quarter_sales': '寄样客户下单汇总表',
        'annual_stock': '经销商寄样申请月度汇总表'
    }
    proxy.download(type[reportType], {
        date: selectedMonth
    }, `${typeName[reportType]}.xlsx`);
    // 这里可以调用实际的导出接口，参数示例：
    // exportApi(reportType, selectedMonth).then(...)
    // ElMessage.success(`准备导出${reportType}，时间：${selectedMonth}`);
};
</script>

<style lang="scss" scoped>
.header-container {
    // 保持原有样式不变
}

// 新增报表列表样式
.report-list {
    padding: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.report-item {
    flex: 1;
    min-width: 300px;
    background: #fff;
    padding: 20px;
    border: 1px solid #f0f2f5;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;

    &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

    .report-title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 8px;
    }

    .report-desc {
        font-size: 14px;
        color: #606266;
        line-height: 1.5;
        margin-bottom: 16px;
    }

    .divider {
        height: 1px;
        background: #f0f2f5;
        margin: 12px 0;
    }

    .picker-btn-group {
        display: flex;
        align-items: center;
        gap: 16px;

        .el-button {
            height: 36px; // 与日期选择器高度对齐
        }
    }
}
</style>

<style lang="scss" scoped>
.header-container {
    padding: 24px 24px 16px;
    border-bottom: 1px solid #f0f2f5;

    .main-title {
        font-size: 20px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 8px;
    }

    .sub-title {
        font-size: 14px;
        color: #606266;
        margin: 0;
    }
}
</style>